<!--
 * @Date: 2024-05-06 17:34:26
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-05-08 14:35:50
 * @FilePath: \reslib-web\src\components\video\src\videoDialog.vue
 * @Description: 对话框播放video
 * @version: 版本
-->
<template>
  <div class="video-dialog">
    <el-dialog v-model="videoDialog" :title="props.dialogTitle" :before-close="beforeClose" width="800" align-center destroy-on-close>
      <video controls id="my-video-dialog" class="video-js vjs-default-skin" preload="auto">
        <source :src="props.currentSource_src" />
      </video>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

const videoDialog = ref(false)
const props = defineProps({
  dialogTitle: String,
  currentSource_src: String,
})
const myPlayer = ref() // 定义 videojs 实例
onMounted(() => {
})
const info = async () => {
  increment()
}
// DOM更新后执行videojs初始化函数
async function increment() {
  await nextTick()
  initVideoSource()
}
// videojs 初始化函数
function initVideoSource() {
  console.log(document.getElementById('my-video-dialog'))
  myPlayer.value = videojs('my-video-dialog', {
    controls: true, // 是否显示控制条
    preload: 'auto',
    autoplay: true, // 自动播放
    loop: false, // 循环播放
    fluid: true, // 自适应宽高
    language: 'zh-CN', // 设置语言
    muted: true, // 是否静音
    inactivityTimeout: false,
    // 设置控制条组件
    controlBar: {
      // 设置控制条组件
      //  设置控制条里面组件的相关属性及显示与否
      currentTimeDisplay: true,
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      volumePanel: {
        inline: false
      },
      pictureInPictureToggle: false
    },
    userActions: {
      seek: false
    },
    techOrder: ['custom', 'html5']
  })
}

const open = async (data: any) => {
  console.log(data)
  videoDialog.value = true
  info()
}
defineExpose({ open })
const destruction = () => {
  var player = videojs('my-video-dialog')
  player.dispose() // 销毁播放器实例
}
const beforeClose = () => {
  videoDialog.value = false
  destruction()
}
onUnmounted(() => {
})
</script>
